<template>
	<view class="little-video">
		<view class="little-video-list">
			<littleVideo-card v-for="item in littleVideoData" :key="item.id" :videoVal="item" />
		</view>
	</view>
</template>

<script setup>
	import {
		getVedioLittleList
	} from '@/api/index.js'
	import {
		ref,
		onMounted
	} from 'vue'

	import {
		onReachBottom
	} from '@dcloudio/uni-app'

	// 小视频列表数据
	const littleVideoData = ref([])

	const page = ref(0)

	onMounted(async () => {
		let {
			data
		} = await getVedioLittleList(page.value)
		console.log(data.data.feeds, 'data');
		littleVideoData.value = data.data.feeds
	})

	onReachBottom(async () => {
		page.value++;
		console.log(page.value);
		let {
			data
		} = await getVedioLittleList(page.value)
		if (!data.data.feeds.length) {
			return
		}
		littleVideoData.value = [...littleVideoData.value, ...data.data.feeds]
		console.log(littleVideoData.value, 'page+++');
	});
</script>

<style lang="scss">
	.little-video {
		width: 100%;

		.little-video-list {
			position: relative;
			margin-bottom: 48px;
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>